<template>
  <view class="upload">
    <custom-navi :show-home="false">
      上传图片
      <view class="upload-btn" slot="right" @tap="handleSave" v-if="!setType">上传</view>
    </custom-navi>
    <view class="upload-imgs">
      <view
        v-for="(item,index) in imgList"
        :key="index"
        class="upload-imgs-child"
        @tap="handleImgDetailSet(index)"
      >
        <image :src="item.url" mode="widthFix" />
        <view class="upload-imgs-child-title">{{item.title}}</view>
      </view>
      <view class="addPhoto" @tap="handlerImg">+</view>
    </view>
    <image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
    <view class="upload-type">
      <view class="upload-type-tit">上传到</view>
      <radio-group @change="radioChange">
        <view class="pi-flex">
          <label
            class="uni-list-cell uni-list-cell-pd"
            v-for="(item, index) in radioItems"
            :key="item.value"
          >
            <view>
              <radio
                :value="item.value"
                :checked="index === current"
                color="#0CD4D3"
              />
            </view>
            <view>{{item.name}}</view>
          </label>
        </view>
      </radio-group>
    </view>
  </view>
</template>

<script>
import CONSTS from '@/src/consts';
import ImageCropper from "../../../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
import { findStoreAlbumList, submitStoreDetail, submitStoreMoreAlbumUrls, deleteQictures } from '../../../../api'
export default {
  data () {
    return {
      shopinfo: null,
      setType: false,
      cj: '',
      imgList: [],
      radioItems: [{
        value: '0',
        name: '轮播',
        checked: 'true'
      },
      {
        value: '1',
        name: '环境',
      },

      {
        value: '2',
        name: '其他'
      }
      ],
      current: '0',
    }
  },
  components: { ImageCropper },
  onShow () {
    this.imgList = uni.getStorageSync('albumList') || [];
  },
  onLoad () {
    this.shopinfo = uni.getStorageSync('shopInfo')
  },
  onUnload () {

    uni.removeStorageSync('albumList')
  },
  methods: {
    async handleSave () {
      let pamList = []
      for (let item of this.imgList) {
        let pam = {
          albumUrl: item.path,
          title: item.title,
          albumType: this.current
        }
        pamList.push(pam)
      }
      const params = {
        storeId: this.shopinfo.id,
        albumUrlsJsonString: JSON.stringify(pamList)
      }

      try {
        const { data } = await submitStoreMoreAlbumUrls(params)
        this.$utils.common.toast.fail("保存成功");
		this.$utils.common.navigateBack()
      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    confirm (e) {
      this.cj = ''
      const _self = this
      uni.uploadFile({
        url: CONSTS.BASE_URL + '/basic/upload/single/store',
        filePath: e.detail.tempFilePath,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          const res = JSON.parse(uploadFileRes.data)

          const imgMode = {
            url: CONSTS.BASE_URL + '/basic' + res.data,
            path: res.data,
            title: ""
          }
          _self.imgList.push(imgMode)
        }
      });
    },
    cancel () {
      console.log('canceled')
    },
    handleImgDetailSet (index) {
      uni.setStorageSync('albumList', this.imgList);
      this.$utils.common.navigateTo('src/pages/my/pages/albumSet/pages/imgSet/index', { id: index })

    },
    handlerImg () {
      const _self = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: CONSTS.BASE_URL + '/basic/upload/single/store',
            // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              'user': 'test'
            },
            success: (uploadFileRes) => {
              const res = JSON.parse(uploadFileRes.data)

              _self.cj = CONSTS.BASE_URL + '/basic' + res.data
            }
          });
        }
      })
    },
    radioChange: function (evt) {
      for (let i = 0; i < this.radioItems.length; i++) {
        if (this.radioItems[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    }
  }
}
</script>
<style>
page {
  background-color: #f3f4f8;
}
uni-radio-group {
  display: flex !important;
}
.uni-list-cell {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}
</style>
<style lang="scss" scoped>
.upload {
  &-btn {
    color: #ffffff;
  }
  &-imgs {
    padding: 32rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    margin-bottom: 20rpx;
    &-child {
      position: relative;
      margin: 2rpx;
      image {
        width: 226rpx;
      }
      &-title {
        position: absolute;
        bottom: 6rpx;
        width: 100%;
        padding: 24rpx;
        padding-bottom: 18rpx;
        color: #ffffff;
        text-overflow: ellipsis;
        overflow: hidden;
        background: linear-gradient(
          180deg,
          rgba(113, 113, 113, 0) 0%,
          rgba(0, 0, 0, 0.33) 33%,
          rgba(3, 3, 3, 1) 100%
        );
      }
    }
    .addPhoto {
      margin: 2rpx;
      width: 226rpx;
      height: 226rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(242, 242, 242, 1);
      border: 1rpx solid rgba(230, 230, 230, 1);
      font-size: 106rpx;
    }
  }
  &-type {
    display: flex;
    justify-content: space-between;
    padding: 38rpx 32rpx;
    background: rgba(255, 255, 255, 1);
    &-tit {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 38rpx;
      color: rgba(80, 80, 80, 1);
      opacity: 1;
    }
  }
}
</style>